<template>
<view class="main-container">
<view class="content-wrapper">
<!-- Hero Banner -->
<view class="hero-banner">
<view class="banner-image-container">
<img :src="bannerImage" alt="青联">
</view>
<view class="banner-content">
<view class="banner-title">
<i class="fas fa-chart-bar"></i>
<h1>青联</h1>
</view>
<h2>专业投票评选制作小程序</h2>
<view class="main-feature-buttons">
<button v-for="(item, index) in mainFeatures"
:key="index"
class="!rounded-button whitespace-nowrap feature-button" @click="jumpToLive(item)">
{{ item }}
</button>
</view>
<view class="free-tag">
完全免费
</view>
</view>
</view>
<!-- Quick Features -->
<view class="quick-features">
<view v-for="(feature, index) in quickFeatures"
:key="index"
class="quick-feature-card"
@click="handleQuickFeatureClick(feature)">
<view :class="['feature-icon', feature.iconColorClass]">
<i :class="feature.icon"></i>
</view>
<view class="feature-name">{{ feature.name }}</view>
</view>
</view>
<!-- Detailed Features -->
<view class="detailed-features">
<view v-for="(feature, index) in detailedFeatures"
:key="index"
:class="['detailed-feature-card', feature.bgColorClass]"
@click="jumpToDetailedVote(feature)">
<view class="feature-header">
<i :class="feature.icon"></i>
<h3>{{ feature.title }}</h3>
<i class="fas fa-chevron-right"></i>
</view>
<p>{{ feature.description }}</p>
</view>
</view>
<!-- Theme Section -->
<view class="theme-section">
<view class="section-header">
<h2>活动评选主题</h2>
<button class="view-more-btn !rounded-button whitespace-nowrap">
查看更多
<i class="fas fa-chevron-right"></i>
</button>
</view>
<!-- 使用uni-app内置的swiper组件 -->
<swiper class="theme-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
<swiper-item v-for="(theme, index) in themes" :key="index">
<view class="theme-card">
<img :src="theme.image" :alt="theme.title">
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>

<script>
		import { getAllProject, voteProject, cancelVoteProject, getRemainingVotes,setRemainingVotes,getVoteId } from '@/api/details.js';
export default {
name: 'App',
data() {
return {
bannerImage: 'https://ai-public.mastergo.com/ai/img_res/38644480179cfe7f528c88e0e54611f2.jpg',
mainFeatures: ['视频投票', '图片投票', '群投票', '官方直播'],
quickFeatures: [
{ name: '简易投票', icon: 'fas fa-poll', iconColorClass: 'purple', path: '/pages/createVote/detailedVote' },
{ name: '评分', icon: 'fas fa-star', iconColorClass: 'orange', path: '/pages/voteRanking/voteRanking' },
{ name: 'PK投票', icon: 'fas fa-trophy', iconColorClass: 'red', path: '/pages/createVote/detailedVote' },
{ name: '调研投票', icon: 'fas fa-chart-pie', iconColorClass: 'blue', path: '/pages/createVote/detailedVote' }
],
detailedFeatures: [
{
title: '活动投票',
description: '活动投票，轻松应对各种活动种类投票',
icon: 'fas fa-award',
bgColorClass: 'green',
path: '/pages/createVote/detailedVote'
},
{
title: '评分排行',
description: '根据评委打分，项目获得票数，计算分数并排行',
icon: 'fas fa-users',
bgColorClass: 'orange',
path: '/pages/voteRanking/voteRanking'
},
{
title: '创建投票',
description: '先进评比/歌唱/舞蹈/萌宝/摄影/海选等数百场景支持',
icon: 'fas fa-image',
bgColorClass: 'blue',
path: '/pages/createVote/detailedVote'
},
{
title: '官方直播',
description: '官方直播，直播投票，支持高清直播播放',
icon: 'fas fa-video',
bgColorClass: 'red',
path: '/pages/live/live'
}
],
themes: [
{
title: '优秀员工评选',
image: 'https://ai-public.mastergo.com/ai/img_res/1b19c90a8ebeda99c99b694c12b4f99e.jpg'
},
{
title: '通用投票模板',
image: 'https://ai-public.mastergo.com/ai/img_res/f2ccc203e3f59d6c301b7439a4af21b4.jpg'
},
{
title: '年度评选活动',
image: 'https://ai-public.mastergo.com/ai/img_res/6597e06852f611c34f5112292f3f9c64.jpg'
},
{
title: '通用问卷模板',
image: 'https://ai-public.mastergo.com/ai/img_res/ba914a5b57c43311e8ba8f5c4860f261.jpg'
}
]
}
},
methods: {
jumpToLive(item) {
if (item === '官方直播') {
	setRemainingVotes().then((data)=>{
			
		});
uni.navigateTo({
url: '/pages/live/live' 
});
} else if (item === '视频投票' || item === '图片投票' || item === '群投票') {
uni.navigateTo({
url: '/pages/createVote/detailedVote' 
});
}
},
jumpToDetailedVote(feature) {
if (feature.path) {
  uni.navigateTo({
    url: feature.path,
    success: () => console.log(`[跳转成功] ${feature.title}`),
    fail: (err) => console.error(`[跳转失败] ${feature.title}`, err)
  });
} else {
  console.log(`[无跳转路径] ${feature.title}`);
}
},
handleQuickFeatureClick(feature) {
console.log('[点击功能项]', feature.name);
console.log('[跳转路径]', feature.path);

if (feature.path) {
uni.navigateTo({
url: feature.path,
success: () => console.log('[跳转成功]', feature.name),
fail: (err) => console.error('[跳转失败]', err)
});
} else {
console.log('[无跳转路径]', feature.name);
}
}
}
}
</script>

<style scoped>
/* 基础设置 */
.main-container {
min-height: 100vh;
background-color: #f9fafb;
}

/* 响应式内容容器 - 优化版 */
.content-wrapper {
max-width: 100%;
padding: 0 clamp(16px, 4vw, 80px);
}

/* 英雄区域 - 优化版 */
.hero-banner {
position: relative;
height: clamp(300px, 45vh, 600px);
border-radius: clamp(12px, 1.5vw, 24px);
overflow: hidden;
margin-bottom: clamp(40px, 6vw, 80px);
}

.banner-image-container {
position: absolute;
inset: 0;
}

.banner-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.banner-content {
position: relative;
z-index: 10;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 clamp(40px, 8vw, 120px);
}

.banner-title {
display: flex;
align-items: center;
margin-bottom: clamp(24px, 4vw, 48px);
}

.banner-title i {
font-size: clamp(2.5rem, 5vw, 5rem);
color: white;
margin-right: clamp(16px, 3vw, 32px);
}

.banner-title h1 {
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: bold;
color: white;
}

.banner-content h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: bold;
color: white;
margin-bottom: clamp(24px, 5vw, 60px);
text-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.main-feature-buttons {
display: flex;
flex-wrap: wrap;
gap: clamp(12px, 2vw, 24px);
margin-top: clamp(16px, 3vw, 32px);
}

.feature-button {
background-color: rgba(255, 255, 255, 0.9);
padding: clamp(12px, 2vw, 18px) clamp(24px, 4vw, 40px);
font-size: clamp(1rem, 2vw, 1.5rem);
font-weight: 500;
transition: all 0.3s;
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.1);
border-radius: 9999px;
}

.feature-button:hover {
background-color: rgba(255, 255, 255, 1);
transform: translateY(-4px);
box-shadow: 0 12px 20px -6px rgba(0, 0, 0, 0.15);
}

.free-tag {
position: absolute;
top: clamp(16px, 3vw, 32px);
right: clamp(16px, 3vw, 32px);
background-color: #ef4444;
color: white;
padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
border-radius: 9999px;
font-size: clamp(0.9rem, 1.5vw, 1.25rem);
font-weight: 500;
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.1);
}

/* 快速功能区 - 优化版 */
.quick-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 15vw, 240px), 1fr));
gap: clamp(16px, 3vw, 40px);
margin-bottom: clamp(40px, 6vw, 80px);
}

.quick-feature-card {
background: white;
border-radius: clamp(12px, 2vw, 20px);
padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px);
text-align: center;
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.05);
}

.quick-feature-card:hover {
box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.1);
transform: translateY(-6px);
}

.feature-icon {
font-size: clamp(1.8rem, 4vw, 3.5rem);
margin-bottom: clamp(12px, 2vw, 24px);
}

.feature-icon.purple i { color: #8b5cf6; }
.feature-icon.orange i { color: #f97316; }
.feature-icon.red i { color: #ef4444; }
.feature-icon.blue i { color: #3b82f6; }

.feature-name {
font-size: clamp(0.9rem, 2vw, 1.5rem);
font-weight: 500;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 详细功能区 - 优化版 */
.detailed-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 45%, 600px), 1fr));
gap: clamp(24px, 4vw, 60px);
margin-bottom: clamp(40px, 6vw, 80px);
}

.detailed-feature-card {
border-radius: clamp(12px, 2vw, 20px);
padding: clamp(24px, 5vw, 48px) clamp(24px, 5vw, 48px);
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.05);
}

.detailed-feature-card:hover {
box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.1);
transform: translateY(-6px);
}

.detailed-feature-card.green { background-color: #f0fdf4; }
.detailed-feature-card.orange { background-color: #fff7ed; }
.detailed-feature-card.blue { background-color: #eff6ff; }
.detailed-feature-card.red { background-color: #fef2f2; }

.feature-header {
display: flex;
align-items: center;
margin-bottom: clamp(16px, 3vw, 32px);
}

.feature-header i {
font-size: clamp(1.5rem, 3vw, 2.5rem);
margin-right: clamp(12px, 2vw, 24px);
}

.feature-header h3 {
font-size: clamp(1.25rem, 3vw, 2rem);
font-weight: 500;
color: #1f2937;
}

.feature-header .fa-chevron-right {
margin-left: auto;
font-size: clamp(1rem, 2vw, 1.5rem);
}

.detailed-feature-card p {
color: #4b5563;
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.6;
}

/* 主题区域 - 优化版 */
.theme-section {
margin-bottom: clamp(40px, 6vw, 80px);
}

.section-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: clamp(24px, 4vw, 48px);
}

.section-header h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: bold;
color: #1f2937;
margin-bottom: clamp(12px, 2vw, 24px);
}

.view-more-btn {
color: #4b5563;
display: flex;
align-items: center;
font-size: clamp(1rem, 2vw, 1.5rem);
font-weight: 500;
padding: clamp(12px, 2vw, 18px) clamp(24px, 4vw, 40px);
border-radius: 9999px;
transition: all 0.3s;
}

.view-more-btn:hover {
color: #111827;
background-color: rgba(0, 0, 0, 0.07);
}

.view-more-btn i {
margin-left: clamp(8px, 1.5vw, 16px);
}

.theme-swiper {
width: 100%;
}

.theme-card {
border-radius: clamp(12px, 2vw, 16px);
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.05);
}

.theme-card:hover {
box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.1);
transform: translateY(-6px);
}

.theme-card img {
width: 100%;
height: clamp(160px, 30vh, 300px);
object-fit: cover;
}

/* 手机端特别优化 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 0 clamp(16px, 5vw, 40px);
  }
  
  .hero-banner {
    height: clamp(300px, 40vh, 500px);
    margin-bottom: clamp(32px, 5vw, 60px);
  }
  
  .banner-content {
    padding: 0 clamp(24px, 5vw, 60px);
  }
  
  .banner-title {
    margin-bottom: clamp(16px, 3vw, 32px);
  }
  
  .banner-title i {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-right: clamp(12px, 3vw, 24px);
  }
  
  .banner-title h1 {
    font-size: clamp(2rem, 5vw, 4rem);
  }
  
  .banner-content h2 {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    margin-bottom: clamp(16px, 4vw, 32px);
  }
  
  .main-feature-buttons {
    gap: clamp(6px, 2vw, 16px);
    margin-top: clamp(12px, 3vw, 24px);
  }
  
  .feature-button {
    padding: clamp(6px, 1.5vw, 12px) clamp(10px, 3vw, 20px);
    font-size: clamp(0.7rem, 2vw, 1rem);
  }
  
  .free-tag {
    top: clamp(10px, 3vw, 16px);
    right: clamp(10px, 3vw, 16px);
    padding: clamp(4px, 1.5vw, 8px) clamp(8px, 3vw, 12px);
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  }
  
  /* 快速功能区 - 手机端强制4列布局 */
  .quick-features {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 2vw, 12px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  
  .quick-feature-card {
    border-radius: clamp(6px, 2vw, 12px);
    padding: clamp(10px, 3vw, 16px) clamp(6px, 2vw, 10px);
  }
  
  .feature-icon {
    font-size: clamp(1rem, 4vw, 1.8rem);
    margin-bottom: clamp(4px, 2vw, 8px);
  }
  
  .feature-name {
    font-size: clamp(0.65rem, 2vw, 0.8rem);
  }
  
  /* 详细功能区 - 手机端单列 */
  .detailed-features {
    grid-template-columns: 1fr;
    gap: clamp(12px, 4vw, 24px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  
  .detailed-feature-card {
    border-radius: clamp(8px, 2vw, 14px);
    padding: clamp(16px, 5vw, 24px) clamp(12px, 4vw, 18px);
  }
  
  .feature-header {
    margin-bottom: clamp(10px, 3vw, 12px);
  }
  
  .feature-header i {
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-right: clamp(6px, 2vw, 8px);
  }
  
  .feature-header h3 {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }
  
  .feature-header .fa-chevron-right {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
  }
  
  .detailed-feature-card p {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    line-height: 1.5;
  }
  
  /* 主题区域 - 手机端 */
  .theme-section {
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  
  .section-header {
    margin-bottom: clamp(12px, 4vw, 16px);
  }
  
  .section-header h2 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    margin-bottom: clamp(6px, 2vw, 0);
  }
  
  .view-more-btn {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    padding: clamp(6px, 2vw, 8px) clamp(12px, 4vw, 16px);
  }
  
  .view-more-btn i {
    margin-left: clamp(4px, 1.5vw, 6px);
  }
  
  .theme-card {
    border-radius: clamp(6px, 2vw, 10px);
  }
  
  .theme-card img {
    height: clamp(100px, 30vh, 160px);
  }
}

/* 桌面端优化 - 防止元素过大 */
@media (min-width: 1200px) {
  .content-wrapper {
    max-width: 1800px;
    margin: 0 auto;
  }
  
  .hero-banner {
    height: 600px;
  }
  
  .banner-content {
    padding: 0 120px;
  }
  
  .main-feature-buttons {
    gap: 24px;
  }
  
  .feature-button {
    padding: 16px 32px;
    font-size: 1.25rem;
  }
  
  .quick-features {
    gap: 40px;
  }
  
  .quick-feature-card {
    padding: 32px 24px;
  }
  
  .detailed-features {
    gap: 60px;
  }
  
  .detailed-feature-card {
    padding: 48px;
  }
  
  .section-header {
    margin-bottom: 48px;
  }
  
  .view-more-btn {
    padding: 16px 32px;
    font-size: 1.25rem;
  }
  
  .theme-card img {
    height: 300px;
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>    